import React, { Fragment, useEffect, useState } from 'react';
import {
  Search,
  Toast,
  Card,
  Button,
  Picker,
  Field,
  ShareSheet,
  Collapse,
} from 'react-vant';
import { NavBar } from 'antd-mobile';
import { history } from 'umi';
import dayjs from 'dayjs';
import calendar from '@/pages/CalendarModule/changeDate.js';
import './index.less';

// 日历选择
const columns = [
  ['2023', '2024', '2025'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
];
const todayDate = new Date(); // 今日日期，实际项目中推荐从接口拿服务器日期用
const todayZeroDate = new Date(
  todayDate.getFullYear(),
  todayDate.getMonth(),
  todayDate.getDate(),
); // 今日零点的日期，用于后续转换时间戳后日期大小的比较
// 分享面板的数据
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];
// 新婚人数
let peopleNum = [1447, 432, 6433, 666, 9999, 888, 3453, 5933, 3563];
// 热度
let hotNum = [3, 2, 5, 2, 5, 2, 3, 4, 3];
// 随机黄历
let almanac = [
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
  { name: '宜', color: '#46d788' },
  { name: '平', color: '#ffaf24' },
  { name: '忌', color: '#333333' },
];
// 黄历数据
let pointList = ['嫁娶', '订婚', '彩礼', '纳婿'];

export default () => {
  // 控制分享面板打开关闭
  const [visible, setVisible] = useState(false);

  // 本月的日期数据
  const [currentDateMount, setCurrentDateMount] = useState([]);

  // 选中当前年月
  const [selectDate, setSelectDate] = useState(['2023', '3']);

  // 当前年
  const [cYear, setChangeYearNum] = useState<number>(
    todayZeroDate.getFullYear(),
  );
  // 当前月
  const [cMonth, setChangeMonthNum] = useState<number>(
    todayZeroDate.getMonth() + 1,
  );

  // 获取指定年月的当月所有天的数组
  const getDateListByMonth = (year: number, month: number) => {
    const days = new Date(year, month, 0).getDate();
    return new Array(days).fill(null).map((v, i) => i + 1);
  };

  // 获取指定年月的1号是周几
  // const getWeekOfFirstDay = (year, month) => {
  //   return new Date(year, month - 1, 1).getDay();
  // };

  // 获取日期渲染数据
  useEffect(() => {
    // 当月的数据
    const curMonthNums = getDateListByMonth(cYear, cMonth);
    const currentList = curMonthNums.map((v) => {
      const vDate = new Date(cYear, cMonth - 1, v);
      const isRedDot = +vDate >= +todayZeroDate;
      const id = dayjs(vDate).format('YYYY-MM-DD');
      return {
        id,
        monthType: 'current',
        disabled: false,
        num: v,
        isRedDot,
      };
    });

    // 给所有日期信息加上节气农历等信息
    let resDateList = currentList.map((v) => {
      let date = v.id.split('-');
      let year = date[0];
      let mouth = date[1];
      let day = date[2];

      let dateParam = calendar.solar2lunar(year, mouth, day);
      return {
        ...v,
        ...dateParam,
      };
    });
    // console.log('本月数据', resDateList);

    // 设置本月日历数据
    setCurrentDateMount([...resDateList] as never);
  }, [cYear, cMonth]);

  return (
    <div className="good_day_box">
      <NavBar
        className="good_day_nav"
        title="结婚吉日排行榜"
        onBack={() => history.goBack()}
      >
        结婚吉日
      </NavBar>
      <div className="good_tabs">
        <div className="change_page" onClick={() => history.push('/goodday')}>
          <span className="change_ico">
            <svg
              t="1677746148244"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1457"
              width="15"
              height="15"
            >
              <path
                d="M900.4 424.87c19.47 0 37.03-11.73 44.49-29.73 7.46-17.98 3.33-38.7-10.43-52.48L713.97 122.19c-7.3-7.3-19.12-7.3-26.42 0l-41.69 41.69c-7.3 7.3-7.3 19.13 0 26.42l138.28 138.27H86.32c-10.19 0-18.46 8.26-18.46 18.46v59.39c0 10.19 8.26 18.46 18.46 18.46H900.4zM937.65 598.72H123.8c-19.47 0-37.03 11.73-44.49 29.73-7.46 17.98-3.33 38.7 10.43 52.48l220.49 220.48c7.3 7.3 19.12 7.3 26.42 0l41.69-41.69c7.3-7.3 7.3-19.13 0-26.42L240.06 695.02h697.59c10.32 0 18.68-8.37 18.68-18.68v-58.93c0-10.32-8.36-18.69-18.68-18.69z"
                p-id="1458"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
          <span>日历</span>
        </div>
        <div className="select_date">
          <Picker
            popup={{
              round: true,
            }}
            className="good_day_popup"
            value={selectDate}
            title="选择日期"
            columns={columns}
            onConfirm={(info: any) => {
              console.log(info);

              if (info.indexOf(undefined) !== -1)
                return Toast({
                  message: '未更改',
                  position: 'top',
                });
              setChangeYearNum(Number(info[0]));
              setChangeMonthNum(Number(info[1]));
              setSelectDate([...info]);
            }}
          >
            {(val, _, actions) => {
              return (
                <div onClick={() => actions.open()}>
                  <span className="date">
                    {cYear}年{cMonth}月
                  </span>
                  <span>
                    <svg
                      t="1677746067530"
                      className="icon"
                      viewBox="0 0 1026 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="9119"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M876.086 337.213c-10.297-10.297-26.252-10.912-36.037-1.691l-310.009 309.983c-12.629 13.299-15.926 13.244-29.173 0l-309.983-309.983c-9.786-9.248-25.741-8.606-36.037 1.691-10.486 10.486-11.071 26.838-1.342 36.597l344.33 344.333c4.238 4.238 9.759 6.14 15.47 6.485h4.317c5.71-0.375 11.235-2.276 15.47-6.485l344.33-344.333c9.714-9.759 9.125-26.137-1.33-36.597z"
                        fill="#ffffff"
                        p-id="9120"
                      ></path>
                    </svg>
                  </span>
                </div>
              );
            }}
          </Picker>
        </div>
        <div className="my_collect" onClick={() => history.push('/collect')}>
          <span>我的收藏</span>
        </div>
      </div>

      <div className="good_day_body">
        <Collapse accordion>
          {currentDateMount.map((item: any, index) => {
            let inds = Math.floor(Math.random() * almanac.length);
            let { id, IMonthCn, IDayCn, ncWeek } = item;
            return (
              <Collapse.Item
                key={index + ''}
                title={
                  <div>
                    <div
                      style={{
                        width: '18%',
                        float: 'left',
                        backgroundImage:
                          index == 0
                            ? 'url(./rankImg/1.png)'
                            : index === 1
                            ? "url('./rankImg/2.png')"
                            : "url('./rankImg/3~.png')",
                      }}
                      className="rank"
                    >
                      {/* one */}

                      <span>{index + 1}</span>
                    </div>
                    <div
                      style={{
                        width: '80%',
                        float: 'right',
                        marginTop: '.1rem',
                      }}
                    >
                      <span style={{ fontWeight: '600', fontSize: '0.34rem' }}>
                        {id
                          ? id.split('-')[1] +
                            '月' +
                            id.split('-')[2] +
                            '日' +
                            '    ' +
                            IMonthCn +
                            IDayCn +
                            '    ' +
                            '周' +
                            ncWeek.split('')[ncWeek.split('').length - 1]
                          : '...'}
                      </span>
                      <br />
                      <span style={{ fontSize: '0.26rem' }}>
                        <b style={{ color: 'red' }}>{peopleNum[inds]}</b>&nbsp;
                        对新人结婚，热度&nbsp;
                        {[...new Array(hotNum[inds]).keys()].map(() => '🔥')}
                      </span>
                    </div>
                  </div>
                }
              >
                <div className="paihang">
                  <div className="pointOutList">
                    {pointList.map((item, index) => {
                      let ind = Math.floor(Math.random() * almanac.length);
                      return (
                        <div className="pointOutItem" key={index}>
                          <span
                            className="icon"
                            style={{ backgroundColor: almanac[ind].color }}
                          >
                            {almanac[ind].name}
                          </span>
                          <span>{item}</span>
                        </div>
                      );
                    })}
                  </div>
                  <hr style={{ width: '90%', margin: '0 auto' }} />
                  <div className="caozuo">
                    <div
                      className="caozuo_one"
                      onClick={() => Toast.info('收藏成功')}
                    >
                      <svg
                        t="1678241096783"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="5843"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z"
                          fill="#6b6b6b"
                          p-id="5844"
                        ></path>
                      </svg>
                      &nbsp;
                      <span>收藏吉日</span>
                    </div>
                    <div className="caozuo_one">
                      <svg
                        t="1678241361776"
                        className="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8973"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M828.576 629.568c-13.792 0-24.512 10.72-24.512 22.976h49.056c0-13.024-10.72-22.976-24.544-22.976z m0-207.68c13.792 0 24.512-10.72 24.512-22.976h-49.056c0.032 13.024 10.784 22.976 24.544 22.976z m31.424 36.768l-151.744 151.744-59.776-59.776c-9.184-9.184-23.744-9.184-32.192 0-9.184 9.184-9.184 23.744 0 32.192l72.032 72.032c4.608 4.608 13.792 6.912 20.704 6.912 6.88 0.768 16.096-1.536 20.704-6.912l164-164c9.184-9.184 9.184-23.744 0-32.192-10.72-9.184-25.28-9.184-33.728 0z m-55.936 193.888v110.336c0 16.864-16.096 30.656-34.496 30.656H216.32c-18.4 0-34.496-13.792-34.496-30.656V309.248c0-16.864 16.096-30.656 34.496-30.656h63.616V234.912H218.592c-47.52 0-85.824 34.496-85.824 77.408v449.056c0 42.912 37.536 77.408 84.288 77.408h549.44c48.288-0.768 86.592-35.264 86.592-78.176v-108.064h-49.024z m0-343.296v89.664h49.056V312.32c0-42.912-38.304-77.408-85.824-77.408h-61.312v43.68h63.616c18.368 0 34.464 13.792 34.464 30.656z m-459.008 55.936c17.632 0 33.728-14.56 33.728-32.192V185.088c0-17.632-15.328-32.192-33.728-32.192-17.632 0-32.192 14.56-32.192 32.192v147.904c-0.768 17.632 13.792 32.192 32.192 32.192z m295.008 0c17.632 0 33.728-14.56 33.728-32.192V185.088c0-17.632-15.328-32.192-33.728-32.192-17.632 0-32.192 14.56-32.192 32.192v147.904c-0.736 17.632 13.824 32.192 32.192 32.192z m-229.888-81.248h164V234.912h-164v49.024z m29.12 361.728c0-25.28 20.704-45.984 45.984-45.984s45.984 20.704 45.984 45.984-20.704 45.984-45.984 45.984-45.984-20.704-45.984-45.984z m0-158.624c0-25.28 20.704-45.984 45.984-45.984s45.984 20.704 45.984 45.984-20.704 45.984-45.984 45.984a46.144 46.144 0 0 1-45.984-45.984z m-167.04 159.392c0-25.28 20.704-45.984 45.984-45.984s45.984 20.704 45.984 45.984-20.704 45.984-45.984 45.984a46.112 46.112 0 0 1-45.984-45.984z m0-158.624c0-25.28 20.704-45.984 45.984-45.984s45.984 20.704 45.984 45.984-20.704 45.984-45.984 45.984a46.144 46.144 0 0 1-45.984-45.984z m0 0"
                          p-id="8974"
                          fill="#6b6b6b"
                        ></path>
                      </svg>
                      &nbsp;
                      <span>酒店档期</span>
                    </div>
                    <div
                      className="caozuo_one"
                      onClick={() => setVisible(true)}
                    >
                      <svg
                        t="1678241269316"
                        className="icon"
                        viewBox="0 0 1066 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="7788"
                        width="18"
                        height="18"
                      >
                        <path
                          d="M911.557091 1023.986547H154.982329c-85.455534 0-154.982329-75.338632-154.982329-167.88407v-665.939697C0 97.590436 69.526795 22.27871 154.982329 22.27871h403.182763v47.086645H154.982329c-59.504066 0-107.895684 54.190002-107.895684 120.797425v665.939697c0 66.607423 48.431978 120.797425 107.895684 120.797424h756.574762c59.504066 0 107.895684-54.190002 107.895684-120.797424V534.917743h47.086646v321.184734c0.013453 92.572344-69.486435 167.88407-154.98233 167.88407z"
                          p-id="7789"
                          fill="#6b6b6b"
                        ></path>
                        <path
                          d="M526.361427 605.359364l-46.131459-9.417329c0.874466-4.305065 22.372883-106.779058 96.863956-218.58966 43.804033-65.840583 97.079209-121.241385 158.143861-164.668725 76.428352-54.311082 165.287578-89.814412 264.102266-105.514446l7.385877 46.508153c-91.590252 14.5565-173.749721 47.315352-244.218249 97.388635-56.409801 40.077462-105.608619 91.348092-146.264573 152.385837-69.405715 104.236379-89.693332 200.938895-89.881679 201.907535z"
                          p-id="7790"
                          fill="#6b6b6b"
                        ></path>
                        <path
                          d="M933.808894 387.859423l-44.140366-16.386152 88.643973-238.675478-238.662025-88.657426L756.050082 0l282.802391 105.057032-105.043579 282.802391z"
                          p-id="7791"
                          fill="#6b6b6b"
                        ></path>
                      </svg>
                      &nbsp;
                      <span>分享吉日</span>
                    </div>
                  </div>
                </div>
              </Collapse.Item>
            );
          })}
        </Collapse>
        <ShareSheet
          visible={visible}
          options={options}
          title="立即分享给好友"
          onCancel={() => setVisible(false)}
          onSelect={(option, index) => {
            setVisible(false);
          }}
        />
        <p
          style={{
            textAlign: 'center',
            color: '#99b1d2',
            fontSize: '0.34rem',
            padding: '0.2rem 0',
          }}
        >
          本数据由婚礼大数据提供
        </p>
      </div>
    </div>
  );
};
